<template>
<div class="departmentPageDataBox">
        <el-table :data="data" v-if="refreshTable" row-key="courseId" :default-expand-all="executeIsExpandAll"
            :tree-props="{ children: 'child', hasChildren: 'hasChildren'}" style="width: 100%">
        
            <el-table-column v-for="(item)  in dataTitle" :key="item.name" :prop="item.name" :label="item.title"
                :width="item.width" >
                <template slot-scope="props">
                    <el-button v-if="item.name == 'goWord'" @click="goWord(props.row)" plain type="success" size="small">{{ props.row[item.name] }}</el-button>
                    <el-button v-else-if="item.name == 'goGrammar'" @click="goGrammar(props.row)" plain type="warning" size="small">{{ props.row[item.name] }}</el-button>
                    <el-button v-else-if="item.name == 'goText'" @click="goText(props.row)" plain type="danger" size="small">{{ props.row[item.name] }}</el-button>
                    <span v-else>{{ props.row[item.name] }}</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" align="center" width="420">
                <template slot-scope="scope">
                    <el-button @click="add(scope.row)" type="text" size="small" v-if="scope.row.parentId == '0'">
                        新增
                    </el-button>
                    <el-button @click="update(scope.row)" type="text" size="small">
                        修改
                    </el-button>
                    <el-button @click="del(scope.row)" type="text" size="small" v-if="scope.row.child.length < 1">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default{
        props:{
            //渲染组件使用的数据集
            data: {
                type: Array,
                required: false,
            },
            /**
             * 数据表格式定义
             * title: 数据表格的标题
             * name:  后端返回要渲染的字段名称
             * width: 当前数据占用列的宽度
             */
            dataTitle: {
                type: Array,
                required: false,
                default: [{ title: "标题", name: "field", width: "180" }],
            },
            /**
             * 是否折叠数据表
             */
            isExpandAll: {
                type: Boolean,
                required: true
            },
        },
        data(){
            return {
                refreshTable: true,
            }
        },
        methods:{
            //处理数据树是否折叠
            handlerExpand() {
                this.refreshTable = false;
                this.$nextTick(() => {
                    this.refreshTable = true;
                })
            },
            //执行修改
            update(row){
                this.$emit("update",row)
            },
            //执行新增
            add(row){
                this.$emit("add",row)
            },
            //执行删除
            del(row){
                this.$emit("del",row)
            },
            //查看单词
            goWord(row){
                this.$router.push({ name: '/words/word',params:{dataEntity:row} });
            },
            //查看文法
            goGrammar(row){
                this.$router.push({ name: '/words/grammar',params:{dataEntity:row} });
            },
            //查看课文
            goText(row){
                this.$router.push({ name: '/words/text',params:{dataEntity:row} });
            }
        },
        computed: {
            executeIsExpandAll() {
                this.handlerExpand();
                return this.isExpandAll;
            }
        },
    }
</script>

<style scoped lang="scss">
</style>